window.onload=function(){
	//导航菜单
	//1、获取li、a、div元素
	var oLi=document.getElementsByClassName("liLeft");	
	var menuA=document.getElementsByClassName("menu");
	var menuList=document.getElementsByClassName("menuList");
	//2、遍历所有的li
	for(var i=0;i<oLi.length;i++){
		//声明一个变量用来存放索引
		var oIndex;
		//保存当前索引
		oLi[i].index=i;
		//3、为li添加鼠标移入事件
		oLi[i].onmouseover=function(){
			//更新索引为当前鼠标移入的li的索引
			oIndex=this.index;
			//设置对应的a标签的背景颜色
			menuA[oIndex].style.backgroundColor="rgba(255,255,255,0.9)";
			//设置对应的div标签显示
			menuList[oIndex-1].style.display="block";
		}
		//4、为li添加鼠标移出事件
		oLi[i].onmouseout=function(){
			//取消对应的a标签的背景颜色
			menuA[oIndex].style.backgroundColor="";
			//设置对应的div标签隐藏
			menuList[oIndex-1].style.display="none";
		}
	}
	
	
	//轮播图
	//1、获取所需要的ul、li、span元素
	var dynBannerBox=document.getElementById("dynBanner");
	var dynLiList=dynBannerBox.getElementsByTagName("li");
//	var father=document.getElementById("dynTab");
//	var tabSpan=father.getElementsByTagName("span");
	var tabSpan=document.getElementById("dynTab").getElementsByTagName("span");
	dynBannerBox.style.width=340*dynLiList.length+"px";
	//2、初始化图片索引和第一个按钮的背景色
	//定义一个变量用来保存索引值,初始值为0，即显示第一张图片
	var indexN=0;
	//初始化第一个按钮的背景颜色为橘黄色
	tabSpan[indexN].style.backgroundColor="#ff7600";
	//3、开启定时器
	//定义一个定时器
	var timer;
	autoPlay();
		
		dynBannerBox.onmouseover=function(){
			clearInterval(timer);
		}
		dynBannerBox.onmouseout=function(){
			autoPlay();
		}
		
		function autoPlay(){
			//开启定时器，每隔4s执行一次
			timer=setInterval(function(){
				//每隔4秒索引值加1
				indexN++;
				//当索引值大于等于轮播图的长度时，让图片回到第一张
				if(indexN>=dynLiList.length){
					indexN=0;}
				//设置ul的left值
				dynBannerBox.style.left=-340*indexN+"px";
				//遍历所有的切换按钮，清除背景颜色
				for(var i=0;i<tabSpan.length;i++){
					tabSpan[i].style.backgroundColor="";
				}
				//设置当前切换按钮的背景颜色为橘黄色
				tabSpan[indexN].style.backgroundColor="#ff7600";
				},4000);
		}
		
		//点击tab切换按钮来切换图片
		//1、先遍历所有的切换按钮
		for(var i=0;i<tabSpan.length;i++){
			//保存索引
			tabSpan[i].index=i;
			//2、为按钮添加单击事件
			tabSpan[i].onclick=function(){
				//设置ul的left值
				dynBannerBox.style.left=-340*this.index+"px";
				//遍历所有的切换按钮，清除背景颜色
				for(var i=0;i<tabSpan.length;i++){
					tabSpan[i].style.backgroundColor="";
				}
				//设置当前切换按钮的背景颜色为橘黄色
				this.style.backgroundColor="#ff7600";
			}	
	}
		
		
		//1、获取所有的span标题和新闻列表
		var spanTitle=document.querySelectorAll(".news .title span");
		var newsList=document.querySelectorAll(".news .newsList");
		//初始化第一个标题颜色为蓝色
		spanTitle[0].style.color="#035b60";
		//2、遍历所有的span
		for(var i=0;i<spanTitle.length;i++){
			//保存索引
			spanTitle[i].index=i;
			//3、添加鼠标单击事件
			spanTitle[i].onclick=function(){
				//遍历所有的新闻列表块
				for(var j=0;j<newsList.length;j++){
					//清除所有的标题菜单的字体颜色
					spanTitle[j].style.color="";
					//设置所有的新闻列表块都隐藏
					newsList[j].style.display="none";
				}
				//设置当前单击的标题对应的新闻列表块显示
				newsList[this.index].style.display="block";
				//设置当前单击的标题颜色为蓝色
				this.style.color="#035b60";
			}			
		}	

		
		
		//1、获取向左、向右按钮和ul、li元素
		var leftBtn=document.querySelector(".icon-lunbozuofangun");
		var rightBtn=document.querySelector(".icon-lunboyoufangun");
		var ulList=document.querySelector(".imgList .item ul");
		var liList=ulList.getElementsByTagName("li");
		//2、将ul中的元素复制一份
		ulList.innerHTML+=ulList.innerHTML;
//		ulList.innerHTML=ulList.innerHTML+ulList.innerHTML
		//动态设置ul的宽度
		ulList.style.width=225*liList.length+"px";
		//3、定时调用，定义一个滚动速度
		var speed=-3;
		//定义一个定时器变量
		var OTimer;
		roll();   //调用函数
		//定义无缝滚动函数，每隔0.02s调用一次
		function roll(){
		     OTimer=setInterval(function(){
		     //让left值每次减少3，匀速滚动
		     ulList.style.left=ulList.offsetLeft+speed+"px";
		     //向左滚动时，判断临界点，
		     if(ulList.offsetLeft<-ulList.offsetWidth/2){
		          ulList.style.left="0px";}
		     //向右滚动时，判断临界点
		     else if(ulList.offsetLeft>0){
		          ulList.style.left=-ulList.offsetWidth/2+"px";}
		     },20);
		}
		
		ulList.onmouseover=function(){
			clearInterval(OTimer);
		}
		ulList.onmouseout=function(){
			roll();
		}
		leftBtn.onclick=function(){
			speed=-3;
		}
		rightBtn.onclick=function(){
			speed=3;
		}
}
